<template>
  <div class="cost-management">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>费用配置</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="计费规则" name="billingRules">
            <div class="toolbar">
              <el-button type="primary" @click="handleAddRule">新增计费规则</el-button>
            </div>
            <el-table :data="billingRules" style="width: 100%">
              <el-table-column prop="name" label="规则名称" width="200" />
              <el-table-column prop="type" label="计费类型" width="150">
                <template #default="scope">
                  <el-tag :type="scope.row.type === 'fixed' ? 'primary' : 'success'">
                    {{ scope.row.type === 'fixed' ? '固定费用' : '按量计费' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="费用金额" width="120" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button link type="primary" @click="handleEditRule(scope.row)">编辑</el-button>
                  <el-button link type="danger" @click="handleDeleteRule(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="价格策略" name="pricing">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>基础套餐</span>
                    </div>
                  </template>
                  <div class="package-content">
                    <el-form :model="basicPackage" label-width="100px">
                      <el-form-item label="月费">
                        <el-input v-model="basicPackage.monthlyFee" />
                      </el-form-item>
                      <el-form-item label="包含交易数">
                        <el-input v-model="basicPackage.includedTransactions" />
                      </el-form-item>
                      <el-form-item label="超出单价">
                        <el-input v-model="basicPackage.excessPrice" />
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="saveBasicPackage">保存</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="12">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>高级套餐</span>
                    </div>
                  </template>
                  <div class="package-content">
                    <el-form :model="premiumPackage" label-width="100px">
                      <el-form-item label="月费">
                        <el-input v-model="premiumPackage.monthlyFee" />
                      </el-form-item>
                      <el-form-item label="包含交易数">
                        <el-input v-model="premiumPackage.includedTransactions" />
                      </el-form-item>
                      <el-form-item label="超出单价">
                        <el-input v-model="premiumPackage.excessPrice" />
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="savePremiumPackage">保存</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="优惠活动" name="promotions">
            <div class="toolbar">
              <el-button type="primary" @click="handleAddPromotion">新增优惠</el-button>
            </div>
            <el-table :data="promotions" style="width: 100%">
              <el-table-column prop="name" label="活动名称" width="200" />
              <el-table-column prop="discountType" label="优惠类型" width="120">
                <template #default="scope">
                  <el-tag :type="scope.row.discountType === 'percentage' ? 'warning' : 'danger'">
                    {{ scope.row.discountType === 'percentage' ? '百分比' : '固定金额' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="discountValue" label="优惠值" width="100" />
              <el-table-column prop="validPeriod" label="有效期" width="200" />
              <el-table-column label="状态" width="100">
                <template #default="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-text="启用"
                    inactive-text="禁用"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button link type="primary" @click="handleEditPromotion(scope.row)">编辑</el-button>
                  <el-button link type="danger" @click="handleDeletePromotion(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const activeTab = ref('billingRules')

// 模拟计费规则数据
const billingRules = ref([
  { id: 1, name: '基础服务费', type: 'fixed', amount: '¥99/月', description: '基础功能使用费' },
  { id: 2, name: '交易手续费', type: 'variable', amount: '¥0.1/笔', description: '每笔交易手续费' },
  { id: 3, name: 'API调用费', type: 'variable', amount: '¥0.01/次', description: 'API接口调用费用' }
])

// 套餐配置
const basicPackage = reactive({
  monthlyFee: '¥99',
  includedTransactions: '1000',
  excessPrice: '¥0.1'
})

const premiumPackage = reactive({
  monthlyFee: '¥299',
  includedTransactions: '5000',
  excessPrice: '¥0.08'
})

// 优惠活动数据
const promotions = ref([
  { id: 1, name: '新用户首月优惠', discountType: 'percentage', discountValue: '50%', validPeriod: '2023-04-01 ~ 2023-12-31', status: true },
  { id: 2, name: '年付优惠', discountType: 'percentage', discountValue: '10%', validPeriod: '2023-01-01 ~ 2023-12-31', status: true },
  { id: 3, name: '推荐奖励', discountType: 'fixed', discountValue: '¥50', validPeriod: '2023-04-01 ~ 2023-06-30', status: false }
])

// 方法
const handleAddRule = () => {
  console.log('新增计费规则')
}

const handleEditRule = (row: any) => {
  console.log('编辑计费规则', row)
}

const handleDeleteRule = (row: any) => {
  console.log('删除计费规则', row)
}

const saveBasicPackage = () => {
  console.log('保存基础套餐配置')
}

const savePremiumPackage = () => {
  console.log('保存高级套餐配置')
}

const handleAddPromotion = () => {
  console.log('新增优惠活动')
}

const handleEditPromotion = (row: any) => {
  console.log('编辑优惠活动', row)
}

const handleDeletePromotion = (row: any) => {
  console.log('删除优惠活动', row)
}
</script>

<style scoped>
.cost-management {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.toolbar {
  margin-bottom: 20px;
}

.toolbar .el-button {
  margin-right: 10px;
}

.package-content {
  padding: 20px 0;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>